<script setup lang="tsx">
defineOptions({
  name: "isolatedList"
});

import { ref, reactive, markRaw, onMounted } from "vue";

const dialogVisible = defineModel({ type: Boolean, default: false });
const list = defineModel("list", { type: Array as PropType<Array<any>>, default: () => [] });

const emits = defineEmits(["submit"]);

const submit = () => {
  dialogVisible.value = false;
  emits("submit");
};
</script>

<template>
  <px-dialog v-model="dialogVisible" title="注意" width="800px" align-center>
    <px-scrollbar wrap-class="isolatedList-content">
      <div v-for="item in list" :key="item" class="isolatedList-item">{{ item }}</div>
    </px-scrollbar>
    <template #footer>
      <span class="dialog-footer">
        <px-button type="primary" @click="submit"> 确定 </px-button>
      </span>
    </template>
  </px-dialog>
</template>

<style lang="scss" scoped>
:deep(.isolatedList-content) {
  min-height: 320px;
  max-height: 420px;

  .isolatedList-item {
    line-height: 32px;
    color: #555;
    letter-spacing: 1px;
  }
}
</style>
